import Wrapper from "./style.ts";
import code from "@/static/imgs/courseContent/二维码 (3).svg";
import qrCode from "@/static/imgs/courseContent/qr_code.svg";
import play from "@/static/imgs/StudentCourseContent/播放.svg";
import classNames from 'classnames';
import React, {useContext, useEffect, useRef, useState} from "react";
import {Outlet} from "react-router";
import {useNavigate} from 'react-router-dom';
import {CourseContentProps} from "@/types/CourseContentTypes.ts";
import JoinClassDialog from "@/components/JoinClassDialog";
import {getCourseDetail} from "@/api/student/courseApi.ts";
import {CourseContext} from "@/pages/StudentCourseContent/context/CourseContext.ts";


const CourseContent: React.FC<CourseContentProps> = ({routes}) => {

    const [name, setName] = useState('')
    const [courseCode, setCourseCode] = useState('')
    const [bg, setBG] = useState('')
    const [teachClass, setTeachClass] = useState('')
    const [memberCount, setMemberCount] = useState(0)

    const courseContext = useContext(CourseContext)

    useEffect(() => {
        // 获取课程信息
        getCourseDetail(courseContext).then(res => {
            const {name, code, bg, teachClass, memberCount} = res.data.data
            setName(name)
            setCourseCode(code)
            setBG(bg)
            setTeachClass(teachClass)
            setMemberCount(memberCount)
        })
    }, [])
    // 处理tab切换
    const [selectBar, setSelectBar] = useState(0);
    const navgiate = useNavigate();
    const handleBarClick = (e: React.MouseEvent<HTMLElement>) => {
        const target = e.target as HTMLElement;
        const index = target.getAttribute('bar-index') || 0;
        setSelectBar(+index);
        // 路由跳转
        routes.forEach((item) => {
            if (item.index == +index) {
                console.log(item.path);
                navgiate(item.path);
            }
        })
    }

    // 加课码
    const [showDialog, /*setShowDialog*/] = useState(false)

    const mainRef = useRef<any>();
    return (
        <Wrapper>
            <div style={{display: showDialog ? '' : 'none'}}>
                <JoinClassDialog/>
            </div>
            <div className="main" ref={mainRef} style={{display: !showDialog ? '' : 'none'}}>
                <div className="header">
                    <div className="header-layout">
                        <img
                            src={bg}
                            alt=""
                        />
                        <div className="header-top">
                            <div className="left" style={{textAlign: 'start'}}>
                                <h1>{name}</h1>
                                <h2>{teachClass}</h2>
                                <div className="flex bottom">
                                    <div className="flex pr16">
                                        <img className="code" src={code}/>
                                        <div>加课码</div>
                                        <div>{courseCode}</div>
                                    </div>
                                    <div className="flex pr16">
                                        <div>已有</div>
                                        <div>{memberCount}</div>
                                        <div>人加入</div>
                                    </div>
                                    <div className="flex pr16">
                                        <img className="code" src={qrCode} alt=""/>
                                        <div>报名审核</div>
                                    </div>
                                </div>
                            </div>
                            <div className="right">
                                <div className="bottom flex">
                                    <div className="flex">
                                        <button>
                                            <img className="code" src={play} alt=""/>
                                            <div>暂无课堂</div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="header-bottom flex">
                        <div className="bar flex" onClick={handleBarClick}>
                            <div bar-index='0'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 0})}>课程学习
                            </div>
                            <div bar-index='1'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 1})}>学情分析
                            </div>
                            <div bar-index='2'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 2})}>成绩管理
                            </div>
                            <div bar-index='3'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 3})}>课程介绍
                            </div>
                        </div>
                    </div>
                </div>
                <div className="component-layout">
                    <Outlet/>
                </div>
            </div>

        </Wrapper>
    );
};
export default CourseContent;
